<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>数据列表</title>
    <link rel="stylesheet" type="text/css" href="../../themes/bootstrap/cetc54.ui.all.css">
</head>
<body>
<div id="grid">
    <table class="grid_data">
        <thead>
            <tr>
                <td style="width: 20px;"><input class="grid_selector" type="checkbox" id="cbAll" /></td>
                <td style="width: 30px;">序号</td>
                <td style="width: 30px;">编码</td>
                <td sortfield="Name">姓名</td>
                <td sortfield="Age">年龄</td>
                <td sortfield="Height">身高</td>
                <td>体重</td>
                <td>创建日期</td>
            </tr>
        </thead>
        <tbody>
            <tr class="row{{i%2}}">

                <td>{{if i!=0}}<input class="grid_selector" type="checkbox" value="{{value.Code}}" id="cb{{i}}"/>{{/if}}</td>
                <td>{{i+1}}</td>
                <td title="{{value.Code}}">{{value.Code}}</td>
                <td title="{{value.Name}}">{{value.Name}}</td>
                <td>{{value.Age | ageFilter:'i'}}</td>
                <td>{{value.Height}}</td>
                <td>{{value.Weight}}</td>
                <td>{{value.CreateDate}}</td>
            </tr>
        </tbody>
        <tfoot>
        <tr></tr>
        </tfoot>
    </table>
</div>
</body>

<script type="text/javascript" src="../../lib/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../../lib/template.js"></script>
<script type="text/javascript" src="../../release/cetc54.ui.all.js"></script>
<script>
    template.defaults.imports.ageFilter=function(value, tag){
        if(value<25){
            return '<'+tag+' style="color:red;">'+value+'</'+tag+'>';
        }
        return value;
    };
    $('#grid').uiGrid({
        autoFit: true,
        colFit: true,
        //colFitAllTime: true,
       //gridTitleFix: true,
        width:1000,
        height:200,
        showHeader:true,
        icon: 'list',
        title: '数据列表'
        ,autoSelectedOnLoad:true
        ,url: 'data.json'
//        ,url:'big_data.json'
//        ,onSelectRow:function(rows){
//            alert(this.uiGrid('selectedData','Code'));
//        }
//        ,multiSelect:false
    });
</script>
</html>